
$color: green;
$size: 80px;

// .box {
//   color: $color;
//   font-size: $size;
// }

//组件复用之组合与继承
.qf-combine{
  width: 520px;
  height: 260px;
  box-sizing: border-box;
  margin: 50px auto;
  border: 1px solid orange;
  .qf-top{
    height: 50px;
    overflow: hidden;
    box-sizing: border-box;
    border-bottom: 1px solid orange;
    line-height: 50px;
    &>span{
      margin-left: 20px;
    }
    &>:last-child{
      margin-right: 20px;
      float: right;
      font-size: 24px;
      cursor: pointer;
    }
  }
  .qf-middle{
    box-sizing: border-box;
    overflow: hidden;
    height: 160px;
    width: 100%;
    padding: 30px 20px 20px ;
    padding-left: 120px;
    & span{
      display: inline-block;
      width: 70px;
    }
    & div div{
      margin-top: 10px;
    }
    & .psword{
      letter-spacing: 10px;
    }
  }
  .qf-buttom{
    border-top:1px solid orange ;
    box-sizing: border-box;
    height: 50px;
    overflow: hidden;
    div{
      &>span{
        float: right;
        display: inline-block;
        width: 60px;
        height: 30px;
        border: 1px solid orange;
        line-height: 30px;
        text-align: center;
        margin-top: 10px;
        margin-right: 10px;
        cursor: pointer;
      }
      &>span.info{
        background: seagreen;
        color: #fff;
        border: 1px solid seagreen;
      }
      &>span.del{
          background: orange;
          color: #fff;
      }
    }
  }
}